<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐闲模式-科乐云</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000000;
            font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold', sans-serif;
            overflow: hidden;
        }
        
        .interface {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 时间显示 */
        .time-display {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 400px;
            font-weight: 800;
            letter-spacing: -10px;  /* 减少字母间距，实现靠近效果 */
            display: flex;
            align-items: center;
            line-height: 0.8;
        }
        
        .time-hour {
            color: #FF69B4;  /* 粉红色 */
            font-weight: 900;
            position: relative;
            /* 添加霓虹灯散射效果 */
            text-shadow: 
                0 0 10px rgba(255, 105, 180, 0.7),
                0 0 20px rgba(255, 105, 180, 0.5),
                0 0 30px rgba(255, 105, 180, 0.3),
                0 0 40px rgba(255, 105, 180, 0.1);
        }
        
        .time-colon {
            color: #ffffff;  /* 紫色 */
            margin: 0 1px;  /* 减少冒号与数字之间的间距 */
            font-weight: 900;
            position: relative;
            /* 添加霓虹灯散射效果 */
            text-shadow: 
                0 0 10px rgba(255, 255, 255, 0.7),
                0 0 20px rgba(241, 234, 255, 0.5),
                0 0 30px rgba(147, 112, 219, 0.3),
                0 0 40px rgba(147, 112, 219, 0.1);
        }
        
        .time-minute {
            color: #9370DB;  /* 紫色 */
            font-weight: 900;
            position: relative;
            /* 添加霓虹灯散射效果 */
            text-shadow: 
                0 0 10px rgba(147, 112, 219, 0.7),
                0 0 20px rgba(147, 112, 219, 0.5),
                0 0 30px rgba(147, 112, 219, 0.3),
                0 0 40px rgba(147, 112, 219, 0.1);
        }
        
        /* 遮盖效果 */
        .time-display span {
            position: relative;
        }
        
        .time-display span::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            /* 使用蒙版实现部分遮盖效果 */
            mask: radial-gradient(circle at center, 
                                  transparent 70%, 
                                  black 100%);
            pointer-events: none;
        }
        
        /* 标志区域 */
        .tech-logo {
            position: absolute;
            bottom: 40px;
            left: 40px;
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 100;
        }
        
        .logo-text {
            color: #ffffff;
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
        }
        
        /* 点击图标 - 带呼吸灯效果 */
        .click-indicator {
            position: absolute;
            bottom: 60px;
            right: 60px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 105, 180, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
            z-index: 100;
            animation: pulse 2s ease-in-out infinite;
        }
        
        .click-dot {
            width: 16px;
            height: 16px;
            background: #FF69B4;
            border-radius: 50%;
            box-shadow: 0 0 15px #FF69B4;
            animation: glow 1.5s ease-in-out infinite;
        }
        
        /* 呼吸灯动画关键帧 */
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
        
        @keyframes glow {
            0% { opacity: 0.6; box-shadow: 0 0 10px #FF69B4; }
            50% { opacity: 1; box-shadow: 0 0 20px #FF69B4, 0 0 30px rgba(255,255,255,0.8); }
            100% { opacity: 0.6; box-shadow: 0 0 10px #FF69B4; }
        }
        
        /* 数字对应的霓虹灯散射效果 */
        .time-hour::after, .time-colon::after, .time-minute::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 500px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, 
                                       rgba(255, 105, 180, 0.6), 
                                       rgba(0, 0, 0, 0) 70%);
            pointer-events: none;
            z-index: -1;
        }
        
        .time-colon::after, .time-minute::after {
            background: radial-gradient(circle, 
                                       rgba(147, 112, 219, 0.6), 
                                       rgba(0, 0, 0, 0) 70%);
        }
        
        /* 屏幕光晕 */
        .interface::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, 
                                       rgba(20,20,20,0.4) 0%, 
                                       rgba(0,0,0,0) 60%);
            pointer-events: none;
            z-index: 10;
        }
    </style>
    <style>
        .sub-title {
            font-size: 0.6em;
            opacity: 0.8;
            margin-top: 10px;
        }
        .main-title {
            font-size: 1.2em;
            text-shadow: 0 0 20px rgba(255,255,255,0.5);
        }
        .content-text {
            font-size: 0.2em;
            opacity: 0.2;
            margin-top: 2px;
            letter-spacing: 2px;
        }  
.interface {
    /* 在已有样式中添加 */
    padding-right: 20%; /* 为文字留出伸展空间 */
}
        </style>
</head>

<body>
    <div class="interface">
        <!-- 时间显示 -->
        <div class="time-display">
            <span id="time-hours" class="time-hour">00</span>
            <span class="time-colon">:</span>
            <span id="time-minutes" class="time-minute">00</span>
        </div>

        <!-- 标志区域 -->
        <div class="tech-logo">
            <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 20px;">隐闲</div>
            <span class="logo-text">科乐云</span>
        </div>

        <!-- 点击图标带呼吸灯 -->
        <div class="click-indicator">
            <div class="click-dot"></div>
        </div>
         <!-- 新增触发按钮 -->
         <button onclick="startAnimation()" style="position: absolute; bottom: 20px; right: 20px; z-index: 200;">
            启动事件
        </button>
    </div>

    <script>
        // 动画相关变量和元素（全局作用域）
        let isAnimating = false;
        const icon = document.createElement('img');
        const overlay = document.createElement('div');
        const demoText = document.createElement('div');
    
        // 初始化毛玻璃层样式
        Object.assign(overlay.style, {
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            backdropFilter: 'blur(18px)', // 模糊强度调整为18px
            backgroundColor: 'rgba(0,0,0,0.1)', // 添加半透明底色增强效果
            display: 'none',
            zIndex: 49
        });
          // 设置图片源和样式
          icon.src = 'https://ts1.tc.mm.bing.net/th/id/R-C.633a9a03ffe3e8083fb0f84cae42e209?rik=Ena9epHbP5MQkw&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2020%2f03%2f36365.jpg&ehk=nO5ZOTbmUWFgAe183zIsdBY0gWDyZdPYV%2fq%2bQktxD48%3d&risl=&pid=ImgRaw&r=0';
        
        // 初始化动画元素
        Object.assign(icon.style, {
            position: 'absolute',
            bottom: '0',
            left: '50%',
            transform: 'translateX(-50%)',
            width: '80px',
            height: '80px',
            borderRadius: '15px',
            objectFit: 'cover',
            transition: 'all 1s ease-out',
            display: 'none',
            zIndex: 50,
        });
        Object.assign(demoText.style, {
        position: 'absolute',  // 改为 absolute 定位
        top: '55%',
        left: '69%',
        right: 'auto',
        whiteSpace: 'nowrap', // 禁止换行
        textAlign: 'left',   // 强制左对齐
        minWidth: '200px',   // 最小宽度
        maxWidth: '70vw',    // 最大宽度
        overflow: 'visible', // 允许溢出
        transform: 'translate(-50%, -50%)',
        color: 'white',
        fontSize: '60px',
        fontWeight: 'bold',
        opacity: '0',
        transition: 'opacity 1s',
        zIndex: 100,
        display: 'none',
        pointerEvents: 'none'  // 添加防止交互冲突
    });

     // 创建文字结构
     demoText.innerHTML = `
    <div style="font-size:0.6em; opacity:0.8">现在</div>
    <div>科乐云</div>
    <div style="font-size:0.4em; margin-top:20px">你好呀，想你了，能和我说说话吗?(小测试)</div>
`;
 // 在界面容器样式中添加
 const style = document.createElement('style');
    style.textContent = `
        .interface {
            contain: layout;               /* 创建布局边界 */
        }
    `;
    document.head.appendChild(style);
        
        document.querySelector('.interface').appendChild(demoText);  // 添加到界面容器
        document.querySelector('.interface').appendChild(icon);
        document.querySelector('.interface').appendChild(overlay);
    
        // 动画函数
        function startAnimation() {
            if (isAnimating) return;
            isAnimating = true;
            
            // 显示毛玻璃层
            overlay.style.display = 'block';
            icon.style.display = 'block';
            
            // 重置初始状态
            icon.style.bottom = '0';
            icon.style.left = '50%';
            icon.style.transform = 'translateX(-50%) scale(0.5)';
            icon.style.transition = 'all 1s ease-out'; // 确保过渡效果启用
            
            icon.style.display = 'block';
            overlay.style.display = 'block';
            
            void icon.offsetWidth; // 触发重排
            
            // 应用动画目标状态
            icon.style.transform = 'translateX(-50%) translateY(-50%) scale(5)'; // 从4改为5
            icon.style.bottom = '50%';
            overlay.style.backdropFilter = 'blur(10px)';
    
            setTimeout(() => {
            // 第二阶段：左移动画（2秒）
            icon.style.transition = 'all 2s ease-out'; // 延长过渡时间
            icon.style.left = '20%';
            icon.style.transform = 'translateY(-50%) scale(3)';

            demoText.style.opacity = 'block';
            demoText.style.display = 'block';
            setTimeout(() => demoText.style.opacity = '1', 50);
        }, 2000); // 2000ms = 2秒停留后开始移动
setTimeout(() => {
demoText.style.opacity = '0';
        setTimeout(() => {
            // 最终重置时隐藏毛玻璃层
            demoText.style.opacity = '0';
            overlay.style.display = 'none';
            icon.style.display = 'none';
            isAnimating = false;

        }, 1000);
    }, 18000);
}
    
        // 时间更新函数
        function updateTime() {
            const now = new Date();
            let hours = now.getHours() % 24;
            hours = hours || 24; // 处理 0 点显示为24
            const minutes = now.getMinutes().toString().padStart(2, '0');
            
            document.getElementById('time-hours').textContent = hours;
            document.getElementById('time-minutes').textContent = minutes;
            setTimeout(updateTime, 1000);
        }
    
        // 初始化
    document.querySelector('.interface').appendChild(demoText);
        document.addEventListener('DOMContentLoaded', updateTime);
    </script>
    <style>
        /* 新增宽高比检测样式 */
        @media (max-aspect-ratio: 1/1) {
            /* 竖屏样式 */
            .time-display {
                flex-direction: column;
                transform: translate(-50%, -50%) rotate(90deg);
                font-size: 30vw;
                letter-spacing: -5px;
            }
            .time-colon {
                margin: 10px 0;
                transform: rotate(-90deg);
            }
        }
    
        @media (min-aspect-ratio: 1/1) {
            /* 横屏样式 */
            .time-display {
                font-size: 25vh;
            }
        }
    </style>
    
    <script>
        // 新增自适应调整函数
        function adjustLayout() {
            const timeDisplay = document.querySelector('.time-display');
            const isPortrait = window.innerHeight > window.innerWidth;
    
            if (isPortrait) {
                timeDisplay.style.fontSize = `${Math.min(window.innerWidth * 0.3, 400)}px`;
            } else {
                timeDisplay.style.fontSize = `${Math.min(window.innerHeight * 0.4, 400)}px`;
            }
        }
    
        // 初始化时和窗口变化时调用
        window.addEventListener('resize', adjustLayout);
        document.addEventListener('DOMContentLoaded', () => {
            updateTime();
            adjustLayout();
        });
    </script>
</body>


</html>

